import { UploadOutlined } from '@ant-design/icons';
import { Button, message, Upload, Table ,Modal,Form,Input} from 'antd';
import React from 'react';
import { useState, useEffect } from 'react';
import {getUser,postUser,getStu, postStu } from '../../api/user';
import Action from '../Action';
import Password from 'antd/lib/input/Password';

const Stu = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [stuList, setStuList] = useState([]);
  const [changelist, setChangelist] = useState(true);
  const [load, setLoad] = useState(false);
  useEffect(() => {
    getStu()
      .then(res => {
        console.log(res, "teacher");

        setStuList(res)
        // setTotal(res.data.totalElements);
      })
  }, [changelist])
  const showModal = () => {
    setIsModalOpen(true);
};
const handleCancel = () => {
    setIsModalOpen(false);
};
  const onFinish = (values) => {
    getUser({id:values.sid}).then(res=>{
      if(res.result.length==0){
        const userdata={
          username:values.sname,
          password:values.password,
          loginid:values.sid,
          power:3,
        }
        console.log(values)
        postUser(userdata)

        postStu({ ...values })
        .then(res1 => {
          console.log(res1)
          setStuList([...stuList, { ...values }])
  
          //   setIsModalOpen(false);
          message.success('新增成功')
          setIsModalOpen(false)
  
        })
      }

      else{
        message.error('存在相同学号/教工号用户！')
      }
    })

    
   

  }
  const handleData = (data) => {
    // 处理回传的数据
    console.log(data);
    let list= [...stuList]
    for(let i =0;i<list.length;i++){
      if(list[i].sid==data.sid){
          if(data.sname==""){
              list.splice(i, 1);
          }
          else{
              list[i]=data;
          }
          
          break;
      }
    }
    setStuList(list)
  };
  const props = {
    name: 'file',
    showUploadList:false,
    action: 'http://localhost:2024/upload/score',
    // beforeUpload:false,
    headers: {
      authorization: 'authorization-text',
    },
    beforeUpload(){
      if(load){
        message.success(`上传中，请不要操作`);
        return false
      } 
      return true
    },
    onChange(info) {
      setLoad(true)
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
        console.log(info.fileList[0].response)
        setChangelist(!changelist)
        setLoad(false)
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  const columns = [
    {
      title: '学号',
      dataIndex: 'sid',
      key: 'sid',
    },
    {
      title: '姓名',
      dataIndex: 'sname',
      key: 'sname',
    },
    {
      title: '所属学院',
      dataIndex: 'ssub',
      key: 'ssub',
    },
    {
      title: '年级',
      dataIndex: 'syear',
      key: 'syear',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Action message={record} type={1} onData={handleData}/>
        //   <Space size="middle">
        //     <Action />
        //     <a onClick={showModal}>修改</a>
        //     <a  onClick={(e)=>deleteTeacher(e,record)}>删除{record.tid}</a>
        //   </Space>
      ),
    },
  ];
  return <>
  <div style={{display:'flex',marginBottom:"10px"}}>
  <Button style={{marginRight:"10px"}}
      type="primary"
      onClick={showModal}
    >
      新增学生
    </Button>
    <Upload  {...props} >
      <Button icon={<UploadOutlined />} loading={load}>{load?"上传中":"批量上传"}</Button>
      
  
    </Upload></div>
  
    <Table dataSource={stuList} columns={columns} scroll={{ y: 280 }} />
    <Modal
                title="新增学生"
                open={isModalOpen}
                footer={null}
                onCancel={handleCancel}
            >
                <Form
                    name="basic"
                    layout='vertical'
                    // style={{ width: 400, margin: '50px auto' }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="学号"
                        name="sid"
                       
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="姓名"
                        name="sname"
                        rules={[
                            {
                                required: true,
                                message: '请输入学生姓名',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="学院"
                        name="ssub"
                        rules={[
                            {
                                required: true,
                                message: '请输入学生所属学院',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="入学年份"
                        name="syear"
                        rules={[
                            {
                                required: true,
                                message: '请输入学生入学年份',
                            },
                        ]}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入设定密码',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item>
                        <Button
                            block
                            shape='round'
                            type="primary"
                            htmlType="submit"
                        >
                            新增学生
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
  </>
};
export default Stu;